<template>
  <div class="body_content" :style="{height: client.height-142 + 'px'}">
    <Left class="left" :projectId="watchProject" :refresh="refresh" @creatForm="creatForm" @refreshFinish="refreshFinish" @chosens="chosens"
      @flowIdBack="flowIdBack" />
    <div class="right">
      <Right :personsList="personsList" :projectId="watchProject" :flowId="flowId" v-if="changeInfo.status === 'submit'&&!changeInfo.choseDoc||changeInfo.status === 'map'&&!changeInfo.choseMap"
      />
      <Maps v-else-if="changeInfo.status === 'map'&&changeInfo.choseMap" />
      <Document :personsList="personsList" :projectName="projectName" :todatFlowId="todatFlowId" :todatFlowPlan="todatFlowPlan"
        :flowId="flowId" @submitFinish="submitFinish" v-else-if="changeInfo.status === 'submit'&&changeInfo.choseDoc" />
    </div>
  </div>
</template>

<script>
  import Left from './left';
  import Right from './right';
  import Maps from './map.vue';
  import Document from './handoverDocument.vue';
  import {
    construction,
    projectManagement
  } from "../../service/service_zbw";
  import {
    mapState
  } from 'vuex';
  export default {
    computed: {
      ...mapState({
        client: state => state.client,
        proJectId: state => state.proJectId
      }),
    },
    components: {
      Left,
      Right,
      Maps,
      Document
    },
    data() {
      return {
        changeInfo: {
          status: 'submit',
          choseMap: false,
          choseDoc: false
        },
        flowId: null,
        todatFlowId: null,
        todatFlowPlan: '',
        refresh: false,
        watchProject: this.$route.params.id,
        personsList: [],
        projectList: [],
        projectName: ''
      }
    },
    methods: {
      chosens(val) {
        this.changeInfo.status = val.name;
        if (this.changeInfo.status === 'map') {
          this.changeInfo.choseMap = val.status;
          this.changeInfo.choseDoc = false;
        } else {
          this.createSubmit();
          this.changeInfo.choseDoc = val.status;
          this.changeInfo.choseMap = false;
        }
      },
      /**
       * 创建新的交接单
       */
      async createSubmit() {
        let res = await construction.createSubmit(this.watchProject);
        if (res.success) {
          if (res.obj.infoBase) {
            this.todatFlowId = res.obj.infoBase.flowId || null;
          }
          if (res.obj.planContentToday) {
            this.todatFlowPlan = res.obj.planContentToday || '';
          }
        } else {
          this.$message({
            message: res.msg,
            type: 'error'
          });
        }
      },
      /**
       * 查询项目名称
       */
      async getProList() {
        let res = await projectManagement.getProList();
        if (res.success) {
          this.projectList = res.obj;
          this.findProName(res.obj);
        } else {
          this.projectList = [];
          this.$message({
            type: 'error',
            message: res.msg
          });
        }
      },
      findProName(data) {
        for (let i of data) {
          if (i.projectId === parseInt(this.watchProject)) {
            this.projectName = i.name;
            return;
          }
        }
      },
      /**
       * 获取可用人员
       */
      async getPersons() {
        //let res = await construction.getPersons(this.watchProject); //获取项目部的所有人员
        let res = await construction.getExePersons(this.watchProject); //获取角色为施工单位的所有人员
        if (res.success) {
          this.personsList = res.obj;
        } else {
          this.$message({
            message: res.msg,
            type: 'error'
          });
        }
      },
      /**
       * 交接单创建成功
       */
      submitFinish() {
        this.refresh = true;
      },
      refreshFinish() {
        this.refresh = false;
      },
      creatForm() {
        this.refresh = true;
      },
      flowIdBack(val) {
        this.flowId = val;
      }
    },
    watch: {
      "$route.params.id" (newval) {
        this.watchProject = newval;  
        if(newval) {    
         this.createSubmit();
        }  
        this.changeInfo = {
          status: 'submit',
          choseMap: false,
          choseDoc: false
        };
        this.findProName(this.projectList);
      }
    },
    mounted() {
      //this.createSubmit();
      this.getPersons();
      this.getProList();
    }
  }

</script>

<style scoped>
  .body_content {
    width: 100%;
    background: #ebebeb;
    display: flex;
  }

  .left {
    width: 258px;
  }

  .right {
    width: calc(100% - 278px);
  }

</style>

